/*
    CSS for the Hero Section. All classes are prefixed with 'W-' to prevent conflicts.
*/

/* Main container for the hero section */
.W-section-container {
    position: relative;
    width: 100%;
    padding: 6rem 1rem; /* Equivalent to py-16 and px-4 */
    overflow: hidden;
    background-image: url('../../img/text section right images/16800.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    box-sizing: border-box;
}

/* Add a responsive padding for medium and large screens */
@media (min-width: 640px) { /* Corresponds to sm: */
    .W-section-container {
        padding: 6rem 1.5rem; /* Equivalent to sm:px-6 */
    }
}
@media (min-width: 768px) { /* Corresponds to md: */
    .W-section-container {
        padding: 6rem 1.5rem; /* Equivalent to md:py-24 and sm:px-6 */
    }
}
@media (min-width: 1024px) { /* Corresponds to lg: */
    .W-section-container {
        padding: 8rem 2rem; /* Equivalent to lg:py-32 and lg:px-8 */
    }
}

/* Wrapper for the content to center it and set max-width */
.W-content-wrapper {
    position: relative;
    max-width: 80rem; /* Equivalent to max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    text-align: center;
}

/* Glassmorphic effect container for text 
.W-glassmorphic-effect {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}*/


/* Main heading styling */
.W-main-heading {
    font-size: 2.25rem; /* Equivalent to text-4xl */
    line-height: 1.25;
    font-weight: 800; /* Equivalent to font-extrabold */
    letter-spacing: -0.05em; /* Equivalent to tracking-tight */
    margin-bottom: 1rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.1); /* Equivalent to drop-shadow-xl */
}

/* Responsive font sizing for main heading */
@media (min-width: 640px) {
    .W-main-heading {
        font-size: 3rem; /* Equivalent to sm:text-5xl */
    }
}
@media (min-width: 1024px) {
    .W-main-heading {
        font-size: 4.5rem; /* Equivalent to lg:text-7xl */
    }
}

/* Gradient text effect for the span inside the heading */
.W-heading-gradient {
    background-image: linear-gradient(to right, #00ffdd, #fb00ff); /* from-teal-400 to-purple-500 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Subheading styling */
.W-sub-heading {
    margin-top: 1rem;
    font-size: 1.125rem; /* Equivalent to text-lg */
    max-width: 48rem; /* Equivalent to max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* Responsive font sizing for subheading */
@media (min-width: 640px) {
    .W-sub-heading {
        font-size: 1.25rem; /* Equivalent to sm:text-xl */
    }
}
@media (min-width: 1024px) {
    .W-sub-heading {
        font-size: 1.5rem; /* Equivalent to lg:text-2xl */
    }
}